<template>
    <div class="canvasBox" ref="canvasBox">
        <canvas v-for="layer,index in canvasLayers" :ref="layer" :key="layer" :style="{zIndex:index+1}"></canvas>
    </div>
</template>

<script>
import ImgDraw from "../util/imgDraw";
import Encapsulation from "../util/DrawEncaClass";

export default {
    props:{
        options:{
            type: Object,
            default:function(){
                return {
                units: "mm",
                viewStatus:{
                    grid:true,
                    text: true,
                    path: true,
                    shape: true,
                    pin: true
                },
                layerStatus:{
                    layer:{
                        st:true,
                        sb:false,
                        at:false,
                        ab:false,
                        sm_t:false,
                        sm_b:false,
                        et:false,
                        eb:false,
                        bt:false,
                        bb:false,
                        pt:false,
                        pb:false
                    },
                    pinLayer:{
                        t:false,
                        tp_t:false,
                        tp_b:false,
                        ts_t:false,
                        ts_b:false,
                        i:false,
                        ip_t:false,
                        ip_b:false,
                        is_t:false,
                        is_b:false,
                        b:false,
                        bp_t:false,
                        bp_b:false,
                        bs_t:false,
                        bs_b:false,
                        drill:false,
                        inspect:false,
                        pinCoord:false
                    }
                },
                gridSize:{
                    x: 0.5,
                    y: 0.5
                },
                origin:{
                    x: 0,
                    y: 0
                },
                scale: 10,
                enca:new Encapsulation({}),
                smallDist:{
                    x: 0.5,
                    y: 0.5
                }
            }
            }
        }
    },
    data(){
        return {
            canvasLayers:["grid","figure","shape","preview","shapePreview"],
            drawInstance:{},

            // canvas大小
            canvasSize:{
                width: 300,
                height: 200
            }
        }
    },

    created(){
        // this.encapsulation.setEncaData(this.options.encaData);
    },

    mounted(){
        
        this.canvasLayers.forEach(layer=>{
            this.drawInstance[layer] = new ImgDraw(this.$refs[layer][0])
        });

        this.updateCanvasSize();
        
        window.addEventListener("resize",()=>{
            this.updateCanvasSize();
            this.draw();
        });

        this.setOrigin(this.options.origin);
        this.draw();
    },

    methods:{
        // 更新canvas的大小
        updateCanvasSize(){
            let width = this.$refs.canvasBox.clientWidth;
            let height = this.$refs.canvasBox.clientHeight;

            this.canvasSize.width = width;
            this.canvasSize.height = height;

            this.canvasLayers.forEach(layer=>{
                this.$refs[layer][0].width = width;
                this.$refs[layer][0].height = height;
                this.drawInstance[layer].setCanvasSize({width,height});
            });

        },

        // 设置绘制的原点
        setOrigin(origin){
            this.canvasLayers.forEach(layer=>{
                this.drawInstance[layer].setOrigin(origin);
            });
        },

        draw(){
            if(this.options.viewStatus.grid){
                this.drawGrid();
            }
            this.drawFigure();
        },
        
        // 绘制格点
        drawGrid(){
            this.drawInstance.grid.clear();
            let gridSize = {
                x: this.options.gridSize.x * this.options.scale,
                y: this.options.gridSize.y * this.options.scale
            }
            this.drawInstance.grid.setGrid(gridSize);
        },

        // 绘制图形
        drawFigure(){
            this.drawInstance.figure.clear();
            this.drawInstance.shape.clear();
            // 绘制文字，丝印线
            let enca = this.options.enca;
            let viewStatus = this.options.viewStatus;
            let layerViewStatus = this.options.layerViewStatus;

            let paths = [], texts = [], shapes = [], pins = [];

            enca.diagramList.forEach(image=>{
                if(image.type == "texts" && viewStatus.text && layerViewStatus.layer[image.layer]){
                    texts.push(...getImageData(image,this.options.scale));
                };
                if(image.type == "paths" && viewStatus.path && layerViewStatus.layer[image.layer]){
                    paths.push(...getImageData(image,this.options.scale));
                };
                if(image.type == "shapes" && viewStatus.shape && layerViewStatus.layer[image.layer]){
                    shapes.push(...getImageData(image,this.options.scale));
                };
                if(image.type == "pins" && viewStatus.pin){
                    pins.push(...getImageData(image,this.options.scale,layerViewStatus.pinLayer));
                };
            });

            this.drawInstance.figure.redrawAll({paths,texts,pins});
            this.drawInstance.shape.redrawAll({shapes});

            function getImageData(image,scale,layers){
                let drawData = image.getDrawData(scale,layers);
                if(drawData instanceof Array){
                    return drawData;
                }else{
                    return [drawData];
                }
            }
        },

        // 更改单位制
        changeUnits(){

        }
    },

    watch:{
        "options":{
            deep:true,
            handler(){
                this.setOrigin(this.options.origin);
                this.draw();
            }
        }
    }
}

</script>

<style lang="less" scoped>
.canvasBox{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #cecece;
    position: relative;
    overflow: hidden;
    canvas{
        position: absolute;
        left: 0;
        top: 0;
    }
}
</style>